import { Component, OnInit } from '@angular/core';
import {SubjectMySuffix} from '../entities/subject-my-suffix';
import {CollegeMySuffix, CollegeMySuffixComponent, CollegeMySuffixService} from '../entities/college-my-suffix';
import {HttpErrorResponse, HttpResponse} from "@angular/common/http";
import {JhiAlertService, JhiEventManager} from "ng-jhipster";
import {SubjectMySuffixService} from "../entities/subject-my-suffix/subject-my-suffix.service";
import {CurrentStateMySuffix, CurrentStateMySuffixService} from "../entities/current-state-my-suffix";
import {NgxEchartsService} from "ngx-echarts";


@Component({
    selector: 'jhi-echarts',
    templateUrl: './echarts.component.html',
    styleUrls: ['./echarts.css']
})
export class EchartsComponent implements OnInit {

    isSaving: boolean;
    showloading:boolean;

    collegeId:number;
    subjectId:number;

    indicatorName=[];
    indicator=[];
    deviation=[];
    value=[];
    referenceValue=[];

    college:CollegeMySuffix;
    colleges:CollegeMySuffix[];

    subject:SubjectMySuffix;
    subjects:SubjectMySuffix[];

    currentState:CurrentStateMySuffix;
    currentStates:CurrentStateMySuffix[];

    chartOption = {
        title: {
            text: '堆叠区域图'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'视频广告',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'直接访问',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {normal: {}},
                data:[820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };

    radarOption = {
        title: {
            text: '各指标分布图'
        },
        tooltip: {},
        legend: {
            data: ['国标参考值', '专业现状值']
        },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: this.indicator
        },
        series: [{
            name: '国标 vs 现状',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: [
                {
                    value: this.referenceValue ,
                    name: '国标参考值'
                },
                {
                    value: this.value,
                    name: '专业现状值'
                }
            ]
        }]
    };

    option = {
        title: {
            text: '偏离指数',
            subtext: '',
            sublink: ''
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top: 80,
            bottom: 30
        },
        xAxis: {
            type : 'value',
            position: 'top',
            splitLine: {lineStyle:{type:'dashed'}},
        },
        yAxis: {
            type : 'category',
            axisLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false},
            splitLine: {show: false},
            data : this.indicatorName
        },
        series : [
            {
                name:'偏离度',
                type:'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}'
                    }
                },
                data:this.deviation
            }
        ]
    };

    constructor(
        private eventManager: JhiEventManager,
        private collegeService: CollegeMySuffixService,
        private subjectService: SubjectMySuffixService,
        private currentstateService:CurrentStateMySuffixService,
        private jhiAlertService: JhiAlertService,
        private es: NgxEchartsService,
    ) {
        setTimeout(()=> {
            this.showloading = false;
        }, 3000);
    }

    ngOnInit() {
        this.isSaving = false;
        this.collegeService.query()
            .subscribe((res: HttpResponse<CollegeMySuffix[]>) => { this.colleges = res.body; }, (res: HttpErrorResponse) => this.onError(res.message));
    }

    updateEcharts(){
        this.clear();
        this.getOption();
        this.getRadarOption();
    }

    getOption(){
        for(let i=0;i<this.currentStates.length;i++){
            this.indicatorName[i]=this.currentStates[i].indicatorName;
            this.deviation[i]=this.currentStates[i].deviation;
        }
        this.option=Object.assign({}, this.option);
    }

    getRadarOption(){
        for(let i=0;i<this.currentStates.length;i++){
            this.value[i]=this.currentStates[i].value;
            this.referenceValue[i]=this.currentStates[i].referenceValue;
            let max=this.referenceValue[i]*1.5;
            let name=this.currentStates[i].indicatorName;
            let a={'name':name,'max':max};
            this.indicator[i]=a;
        }
        this.radarOption=Object.assign({},this.radarOption);
    }
    clear(){
        this.indicatorName.length=0;
        this.indicator.length=0;
        this.value.length=0;
        this.deviation.length=0;
        this.referenceValue.length=0;
    }

    choose(){
        this.load(this.collegeId);
    }

    submit(){
        this.findCurrentStates(this.subjectId);
    }

    findCurrentStates(id){
        this.currentstateService.findAllBySubjectId(id)
            .subscribe((currentStateResponse: HttpResponse<CurrentStateMySuffix[]>) => {
                this.currentStates = currentStateResponse.body
            });
    }

    load(id) {
        this.subjectService.findAllByCollegeId(id)
            .subscribe((subjectResponse: HttpResponse<SubjectMySuffix[]>) => {
                this.subjects = subjectResponse.body
            });
    }

    private onError(error: any) {
        this.jhiAlertService.error(error.message, null, null);
    }

    trackCollegeById(index: number, item: CollegeMySuffix) {
        return item.id;
    }

    trackSubjectById(index: number, item: SubjectMySuffix) {
        return item.id;
    }
}
